<template>
	<view>
		<view class="content-baisc-layout" v-if="productData.status != false">
			<image src="https://resource.lanbaozixun.com/uploads/images/2024072211160363b987680.png" mode="heightFix"
				class="propagandize"></image>
			<view class="content bg-white">
				<view class="u-text-center u-margin-top-48">
					<view class="xxl bold u-padding-bottom-20 u-color-000000">一客一码，杜绝外传</view>
					<view class="title bold" v-html="productData.title"></view>
					<view class="son-title u-padding-top-15">{{productData.client_name}}内部白名单通道</view>
					<image src="https://resource.lanbaozixun.com/uploads/images/20240710211617d518e3151.png" mode="widthFix"
						class="icon-xl mt20"></image>
				</view>
				<view class="qr-code-show-area bg-white">
					<image :src="captchaSrc(productData.qr_code_base64)" mode="widthFix" class="qr-code"></image>
				</view>
				
				<view class="hint">
					<view class="xxl u-padding-bottom-15 bold">截图保存:{{productData.id ==529?'支付宝扫码':'微信扫码'}}申请</view>
					<view class="md u-padding-bottom-15" v-if="userInfo.nickname">渠道经理:{{userInfo.nickname||''}}</view>
					<view class="xs u-padding-bottom-15">失效时间:{{productData.failure_time}}</view>
					<view class="lg u-padding-18 xxl white hint-btn-style u-margin-top-25" @click="refresh">刷新</view>
				</view>
			</view>
			
		</view>
		<view v-else class="u-padding-top-45 u-padding-bottom-45 u-text-center msg-hint-area">
			<u-icon name="error-circle-fill" color="#fa5151" size="120"></u-icon>
			<view class="u-margin-top-32 bold xl">
				{{productData.msg||''}}
			</view>
		</view>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		QRCode,
		GetImg,
		GetPixelRatio,
		GetPx
	} from '@/uni_modules/wmf-code/js_sdk/index.js';
	import {
		queryQrCode
	} from '../../api/new';
	export default {
		data() {
			return {
				produtcId: 0,
				productData: [],
				loadingShowStatus:true
			};
		},
		onLoad(e) {
			this.getUser()
			this.produtcId = e.id;
			this.queryQrCodeFun()
		},
		methods: {
			...mapActions(['getUser']),
			captchaSrc(e) {
				if (e == undefined) return '';
				return e.replace(/[\r\n]/g, "");
			},
			queryQrCodeFun() {
				queryQrCode({
					id: this.produtcId
				}).then(res => {
					if (res.code == 1) {
						this.loadingShowStatus = false;
						this.productData = res.data;
					}
				});
			},
			refresh() {
				this.$u.toast('二维码刷新成功');
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(242, 249, 255, 1);
		background-image: url('https://resource.lanbaozixun.com/uploads/images/2024071021133658d301253.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		
		
		.msg-hint-area{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.propagandize {
			height: 117rpx;
			margin: 30rpx 6%;
		}
		
		.content {
			width: 90%;
			margin: 0 5%;
			color: #525252;
			border-radius: 10px;
			padding: 10px 15px 10px 15px;
			
			.title {
				color: #0D388F;
				font-size: 20px;
				text-align: center;
				position: relative;
				display: inline-block;
				
				&:before{
					left: 0;
					right: 0;
					z-index: -1;
					bottom: 12rpx;
					height: 8rpx;
					content: ' ';
					position: absolute;
					border-radius: 10rpx;
					background: linear-gradient(90deg, rgba(67, 126, 234, 0.28) 0%, rgba(137, 208, 254, 0.68) 100%);
				}
			}
			
			.qr-code-show-area{
				width: 55%;
				margin: 20px auto;
				padding: 10rpx 10rpx;
				border-radius: 10rpx;
				border: 10rpx solid rgba(196, 232, 255, 0.59);
				.qr-code{
					width: 100%;
				}
			}
			
			.hint {
				font-size: 20px;
				text-align: center;
				
				.hint-btn-style{
					width: 80%;
					margin: 0 auto 20rpx;
					border-radius: 100rpx;
					background: linear-gradient(180deg, rgba(107, 178, 255, 1) 0%, rgba(67, 126, 234, 1) 100%);
				}
			}
		}
	}
</style>